import moment from 'moment';
import React from 'react';
import { SimpleWeekC, SingleDateC, SecondHeaderC } from '../../components';
import { Form } from 'antd';

class SimpleWeekCDemo extends React.Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }

  componentDidMount = () => {
    // datepicker类型设置值需要moment，不能传时间字符串
    this.formRef.current.setFieldsValue({
      dateBegin: moment('2023-2-1'),
    });
  };

  render() {
    return (
      <Form ref={this.formRef} style={{ padding: '20px', width: '800px' }} labelWrap={true}>
        <SecondHeaderC title='场景1' />
        <SimpleWeekC
          // form={this.props.form} // form对象
          form={this.formRef.current}
          title='日期选择日期选择日期选择日期选择日期选择' // 显示名称
          dataIndex='date1' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={moment('2020-06-01')}
          rules={[{ required: true, message: '选择日期以便进行下一步操作' }]}
          dateBeginKey='1'
          // placeholder='请选择日期时间'
          // disableBegin={moment('2023-07-01')}
          // disableEnd={moment('2023-07-31')}
          // helper='点击选择时间'
        />
        <SecondHeaderC title='场景2' />
        <SimpleWeekC
          form={this.formRef.current}
          // form={this.props.form} // form对象
          title='日期选择' // 显示名称
          dataIndex='date2' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          // initialValue={moment('2020-06-01')}
          placeholder='请选择日期时间'
          // disableBegin={moment('2023-07-01')}
          // disableEnd={moment('2023-07-31')}
          helper='点击选择时间'
        />
        <SecondHeaderC title='场景3' />
        <SingleDateC
          title='开始时间' // 显示名称
          dataIndex='dateBegin' // Form识别的下拉选项Item ID
          placeholder='请选择日期时间'
        />
        <SingleDateC
          title='结束时间' // 显示名称
          dataIndex='dateEnd' // Form识别的下拉选项Item ID
          placeholder='请选择日期时间'
        />
        <SimpleWeekC
          form={this.formRef.current}
          title='日期选择' // 显示名称
          dataIndex='date2' // Form识别的下拉选项Item ID
          onChange={(e) => console.log(111, e)} // 时间变化事件
          placeholder='请选择日期时间'
          helper='点击选择时间'
          dateBeginKey='dateBegin'
          dateEndKey='dateEnd'
        />
      </Form>
    );
  }
}

export default SimpleWeekCDemo;
